<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>管理员登录</title>
		<!-- 引入layui的css文件 -->
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
		<link rel="stylesheet" type="text/css" href="css/login.css"/>
		
	</head>
	<body>
		<form class="layui-form" >
			<input type="hidden" name="token"  />
			<h1>管理员登录</h1>
			<div class="layui-form-item">
				<label class="layui-form-label">账号</label>
				<div class="layui-input-inline">
					<input type="text" name="rootname" id="" placeholder="请填写账号"  class="layui-input"/>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">密码</label>
				<div class="layui-input-inline">
					<input type="password" name="password" id="" placeholder="请填写密码"  class="layui-input"/>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">验证码</label>
				<div class="layui-input-inline">
					<input type="text" name="vercode" id="" placeholder="请填写验证码"  class="layui-input"/>
				</div>
				<div class="layui-form-mid layui-word-aux vercode">
					 
					 <img  />
				</div>
			</div>
			<div class="layui-form-item">
			    <div class="layui-input-block">
			      <button class="layui-btn layui-btn-normal" lay-submit lay-filter="login">登录</button>
			    </div>
			</div>
		</form>
		
		<script type="text/javascript" src="layui/layui.js"></script>
		<script type="text/javascript" src="./js/cookie.js" charset="UTF-8"></script>
		<script type="text/javascript">
			layui.use(['layer','form'],function(){
				var lay =layui.layer;
				var form =layui.form;
				var $ = layui.jquery;
				
				//登录事件
				form.on('submit(login)',function(data){
					
					//使用ajax
					$.ajax({
						url:'http://127.0.0.1:8888/api/roots',
						type:'get',
						data:data.field,
						dataType:'json',
						success:function(data){
							if(data.status == 200){
								//登录的Token
								//如何保存Token   ==> cookie
								setCookie('token',data.msg);
								
								//跳转主页面
								window.location.href="index.html"
								
							}else{
								layer.msg(data.msg);
								updateVercode();
							}
							
						},error:function(){
							
							
						}
					});
					
					
					return false;
				});
				updateVercode();
				
				$(".vercode img").click(function(){
					updateVercode();
				});
				
				
				//更新验证码
				function updateVercode(){
						/* 使用Ajax请求验证码的信息 */
					$.ajax({
							url:'http://127.0.0.1:8888/vercode',
							type:'get',
							data:{},
							dataType:'json',
							success:function(data){
								if(data.status== 200){
									//成功获取验证码的信息
									var token = data.msg;
									$(".vercode img").attr('src','http://127.0.0.1:8888/vercode/'+token);
									$("input[name='token']").val(token);
								}
							},error:function(){
								
								
							}
						});
					
				}
			
				
					
					
					return false;
				});
				
		
		</script>
	</body>
</html>
